<template>
  <view class="container">
	  <uni-nav-bar
	    title="商品"
	    statusBar="true"
	    fixed="true"
	    color="#000000"
	    backgroundColor="#ffffff"
	  ></uni-nav-bar>
    <!-- 顶部搜索框 -->
    <view class="search-box">
      <view class="search-input">
        <text class="iconfont icon-search">🔍</text>
        <input type="text" placeholder="请输入搜索的商品名称" placeholder-class="placeholder"  v-model="searchName" @confirm="searchProductByName()"  />
      </view>
    </view>
    
    <!-- 主体内容区 -->
    <view class="main-content">
      <!-- 左侧分类菜单 -->
      <scroll-view class="left-menu" scroll-y>
        <view 
          class="menu-item" 
          :class="{ active: currentCategory === index }"
          v-for="(item, index) in categories" 
          :key="index"
          @tap="switchCategory(index)"
        >
          {{item.name}}
        </view>
      </scroll-view>
      
      <!-- 右侧商品列表 -->
      <scroll-view class="right-content" scroll-y>
        <view class="goods-list">
          <view class="goods-item" v-for="(item, index) in goodsList" :key="index">
            <view class="goods-info">
				   <image :src="item.image" mode="aspectFill" class="goods-image" @click="getProductDetail(item)" ></image>
              <view class="goods-detail">
                <view class="goods-name">{{item.name}}</view>
                <view class="goods-sold" v-if="item.sold">已售{{item.sold}}份</view>
				 <view class="goods-sold" v-else>已售{{0}}份</view>
                <view class="goods-price-box">
                  <view class="price-wrap">
                    <text class="price-symbol">¥</text>
                    <text class="goods-price">{{item.price}}</text>
                  </view>
                  <view class="add-btn" @click="addProductToCart(item)">+</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
	<view-tabbar tabIndex=1></view-tabbar>
  </view>
</template>

<script src="./index.js"></script>
<style src="./index.scss" lang="scss" scoped></style>
<style scoped>
/* #ifdef MP-WEIXIN || APP-PLUS */
::v-deep ::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
  color: transparent;
}

/* #endif */
</style>
